<template>
  <el-dialog
    title="编辑数据"
    :visible="dialogVisible"
    width="80%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column label="数据ID">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="模型选择">
        <template slot-scope="scope">
          <el-select v-model="scope.row.model" placeholder="请选择">
            <el-option
              v-for="dict in dict.type.sim_widget_model"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="x轴">
        <template slot-scope="scope">
          <el-input v-model="scope.row.xAxis" placeholder="请输入x轴" />
        </template>
      </el-table-column>
      <el-table-column label="y轴">
        <template slot-scope="scope">
          <el-input v-model="scope.row.yAxis" placeholder="请输入y轴" />
        </template>
      </el-table-column>
      <el-table-column label="z轴">
        <template slot-scope="scope">
          <el-input v-model="scope.row.zAxis" placeholder="请输入z轴" />
        </template>
      </el-table-column>
      <el-table-column label="俯仰">
        <template slot-scope="scope">
          <el-input v-model="scope.row.pitch" placeholder="请输入俯仰" />
        </template>
      </el-table-column>
      <el-table-column label="滚转">
        <template slot-scope="scope">
          <el-input v-model="scope.row.roll" placeholder="请输入滚转" />
        </template>
      </el-table-column>
      <el-table-column label="偏航">
        <template slot-scope="scope">
          <el-input v-model="scope.row.yaw" placeholder="请输入偏航" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.$index)" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button style="margin-top: 20px;" type="primary" @click="handleAddRow">新增行</el-button>
    <el-button style="margin-top: 20px;" type="primary" @click="handleSave" :loading="saveLoading">保存</el-button>
    <el-button style="margin-top: 20px;" type="primary" @click="createModel">生成地物</el-button>
  </el-dialog>
</template>

<script>
import {getObstacleList, updateObstacle} from "../../../api/train";

export default {
  name: "edit-model",
  dicts: ['sim_widget_model'],
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    trainId: {
      default: '',
    }
  },
  data() {
    return {
      tableData: [],
      idCounter: 100,
      loading: false,
      saveLoading: false
    };
  },
  watch: {
    dialogVisible(newVal, oldVal){
      if(newVal){
        this.loading = true
        getObstacleList(this.trainId).then(res=>{
          this.tableData = res.data
          this.loading = false
        })
      }
    },
  },
  methods: {
    createModel(){
      this.tableData.map(item=>{
        const {id, model, xAxis, yAxis, zAxis,pitch, roll, yaw} = item
        this.$ws.send(JSON.stringify({
          cmd: "py:TargetCreateDemo",
          data: [Number(id), Number(model), Number(xAxis), Number(yAxis), Number(zAxis),Number(pitch), Number(roll), Number(yaw)]
        }))
      })
    },
    handleAddRow() {
      this.tableData.push({
        id: this.generateID(),
        model: '',
        xAxis: 0,
        yAxis: 0,
        zAxis: 0,
        pitch: 0,
        roll: 0,
        yaw: 0
      });
    },
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    handleClose() {
      this.$emit('close')
      this.tableData = []
    },
    handleSave(){
      this.saveLoading = true
      let params = {
        id: this.trainId,
        data: this.tableData
      }
      updateObstacle(params).then(res=>{
        this.saveLoading = false
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      }).cache(e=>{
        this.saveLoading = false
      })
    },
    generateID() {
      let id = this.idCounter++;
      while (this.tableData.some(data => data.id === id)) {
        id = this.idCounter++;
      }
      return id;
    }
  }
};
</script>
